<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--                                                               -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--                                                               -->
<link id="cssFile" type="text/css" rel="stylesheet" href="IntoGwt.css">
<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>Advanced Suggest Select Box Project</title>

<!--                                           -->
<!-- This script loads your compiled module.   -->
<!-- If you add any GWT meta tags, they must   -->
<!-- be added before this line.                -->
<!--                                           -->
<script type="text/javascript" language="javascript"
	src="intogwt/intogwt.nocache.js"></script>
</head>

<!--                                           -->
<!-- The body can have arbitrary html, or      -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.        -->
<!--                                           -->
<body style="width: 100%;">

	<!-- OPTIONAL: include this if you want history support -->
	<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
		style="position: absolute; width: 0; height: 0; border: 0"></iframe>

	<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
	<noscript>
		<div
			style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
			Your web browser must have JavaScript enabled in order for this
			application to display correctly.</div>
	</noscript>

	<div style="width:800px; margin-left: auto; margin-right: auto;">
		<div style="text-align: center;vertical-align: top;height: 60px;">
			<h1 style="padding-bottom: 3px;">Advanced Suggest Box and Select Box Project</h1>
			<h5 style="padding-right: 50px; text-align: right;">Version 1.5.0</h5>
		</div>

		<div>
			<table
				style="border-bottom: 1px solid black;">
				<tr>
					<td colspan="2">
						<h3>Advanced Suggest Box and Select Box :</h3> The <b>DefaultIconedSuggestBox</b>
						is built to support these features:
						<ul>
							<li>Icons in your suggest box and select box</li>
							<li>Use <b>any GWT widgets</b> to display your values inside
								the suggest box: an html table mode is also available for multiple
								columns display mode</li>
							<li>Value <b>validation</b> (here for the example purpose we
								check the value length is more than 3 chars)</li>
							<li>The <b>Strict mode</b> allows you to use the suggest box
								instead of the combo (select) boxes also</li>
							<li>Have your own <b>filtering algorithm</b> that is activated
								as the user types (for an example we added the two filtering
								algos: case sensitive and starts with)</li>
							<li>Many styles are added on events like mouse over, element
								selection, matching characters, validation error etc... just write
								your css file and you're done)'
						</ul> In addition, there are some "invisible" features like:
						<ul>
							<li><b>Type safe</b> values</li>
							<li>Decorate your Suggest Box or Select Box with <b>complementary
									information</b> (other that an icon) by extending <b>DefaultSuggestBox</b>
								(the parent class of DefaultIconedSuggestBox) and adding your
								logic directly inside the component</li>
							<li>Alternate representations of the <b>choice list</b>
								(You're not obliged to have a popup)</li>
							<li>Extended styling in a consistent way on all browsers (in
								opposition to the Select box that is a native component which
								display depends on the browser)</li>
							<li>The architecture is a very clean approach with more than
								10 years of experience in Java technologies, you can get into the
								source code and find what you need very easily</li>
						</ul></td>
				</tr>
				<tr>
					<td style="width: 70%;">
						<h4>Test the Suggest box here and play with the options on the
							right:</h4>
					</td>
					<td style=""><h4>Options:</h4>
					</td>
				</tr>
		
				<tr>
					<td id="suggestBoxContainer"
						style="vertical-align: top; padding: 10px;"></td>
					<td id="options"></td>
				</tr>
				<tr>
					<td>I chose some of my preferred Google chrome extentions to
						fill the values of this list. Here are the values that you chose</td>
				</tr>
				<tr>
					<td style="color: green; font-weight: bold; padding-top: 5px;"
						id="infoContainer"></td>
				</tr>

				<tr>
					<td style="width: 70%;">
						<h4>Test the Multivalued Suggest box here </h4>
					</td>
					<td style=""><h4>Options:</h4>
					</td>
				</tr>
				
				<tr>
					<td id="suggestBoxMultiValueContainer"
						style="vertical-align: top; padding: 10px;"></td>
					<td id="options">The same options as the advanced suggest box are available. <br>You can define your own styles, layout and position (left, right, top, bottom, or outside the box) to represent the selected values</td>
				</tr>

			</table>
		
			<table align="center" style="width: 400px">
				<tr>
					<td>
						<h3>Advanced Text Box :</h3></td>
				</tr>
				<tr>
					<td>this component is the basic widget of the suggest box, it
						handles:
						<ul>
							<li>Default text with a different style</li>
							<li>Double click events</li>
						</ul></td>
				</tr>
				<tr>
					<td id="advancedTextBox"></td>
				</tr>
			</table>
		
			<div style="padding-top: 30px; text-align: center;">
				This demo is for the <a
					href="http://code.google.com/p/advanced-suggest-select-box/">Advanced
					suggest select box</a> project licenced under the Apache2 licence
			</div>
		
			<div style="text-align: center; text-decoration: underline">Thanks
				to Thomas Lebrun toma.diw@gmail.com for his contribution in the
				graphical design proposition.</div>
		</div>
	</div>
		
</body>
</html>
